{% extends 'layout.html' %}
{% block style %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('main.static', filename='css/style.css') }}">
<link rel="stylesheet" href="{{ url_for('main.static', filename='css/model.css') }}">
{% endblock %}

{% block body %}
<div class="container">
      <h2 class="heading">Things Todo</h2>
    <button id="btn" class="add-item">Add Task</button>
    <div class="model-section">
      <div class="model">
        <div class="model--header">
        <h2 class="heading">Add Task </h2>

        </div>
        <!-- Close model--header -->
        <div class="model--body">
        <form action="/add" method="post">
          {{ form.hidden_tag() }}
          {{ form.task(class='get-item', autofocus='autofocus') }}
                {% if form.task.errors %}
                    <ul class="errors">{% for error in form.task.errors %}<li>{{ error }}</li>{% endfor %}</ul>
                {% endif %}
          {{ form.add(class='submit') }}
        </form>
        </div>
      </div>
    <!-- Close model -->
   </div>
      {% for todo in todos %}
      <p class="item">{{ todo.task }}{{ todo.id }}</p>
        <a href="{{ url_for('main.trash', id=todo.id) }}"><img  class="icon trash" src="{{ url_for('static', filename='images/trash.svg') }}" alt=""></a>
        <a href="{{ url_for('main.check', id=todo.id) }}"><img class="icon check" src="{{ url_for('static', filename='images/check.svg') }}" alt=""></a>
      {% endfor %}
</div>
{% endblock %}

{% block script %}
{{ super() }}
<script src="{{ url_for('main.static', filename='js/script.js') }}"></script>
{% endblock %}
